document.addEventListener('DOMContentLoaded', function() {
    // 显示咨询总量数字
    initConsultationTotal();

    // 初始化中国地图
    initChinaMap();

    // 添加数字滚动效果
    startDigitAnimation();
});

function initConsultationTotal() {
    // 获取咨询总量显示位置
    const mapmain = document.querySelector('.mapmain');
    if (!mapmain) return;

    // 在列表区域上方添加总量数字显示
    const totalHTML = `
        <div id="consultation-total">
<!--            <div class="total-label">咨询总量</div>-->
<!--            <div class="total-digits">-->
<!--                <span>0</span>-->
<!--                <span>0</span>-->
<!--                <span>5</span>-->
<!--                <span>0</span>-->
<!--                <span>8</span>-->
<!--                <span>9</span>-->
<!--                <span>1</span>-->
<!--                <span>5</span>-->
<!--            </div>-->
        </div>
    `;
    mapmain.insertAdjacentHTML('afterbegin', totalHTML);

    // 添加样式
    const style = document.createElement('style');
    style.innerHTML = `
        #consultation-total {
            text-align: center;
            // margin-bottom: 20px;
            padding: 15px;
            // background: rgba(6, 33, 68, 0.7);
            border-radius: 8px;
            border: 1px solid rgba(36, 187, 236, 0.2);
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
        }
        
        .total-label {
            font-size: 1.8rem;
            color: #24bbec;
            font-weight: bold;
            margin-bottom: 15px;
            text-shadow: 0 0 10px rgba(36, 187, 236, 0.8);
            position: relative;
        }
        
        .total-label::after {
            content: '';
            position: absolute;
            bottom: -5px;
            left: 50%;
            transform: translateX(-50%);
            width: 60%;
            height: 3px;
            background: linear-gradient(to right, transparent, #24bbec, transparent);
            border-radius: 3px;
        }
        
        .total-digits {
            display: flex;
            justify-content: center;
            gap: 10px;
        }
        
        .total-digits span {
            display: inline-block;
            width: 45px;
            height: 60px;
            line-height: 60px;
            font-size: 2.5rem;
            font-weight: bold;
            color: #fff;
            background: rgba(10, 58, 124, 0.5);
            border-radius: 6px;
            text-align: center;
            border: 1px solid rgba(36, 187, 236, 0.3);
            box-shadow: 0 0 15px rgba(36, 187, 236, 0.5);
        }
    `;
    document.head.appendChild(style);
}

function initChinaMap() {
    const mapElement = document.getElementById('map');
    if (!mapElement) return;

    const chart = echarts.init(mapElement);

    // 地图配置选项
    const option = {
        tooltip: {
            trigger: 'item',
            formatter: function(params) {
                return `${params.name}: ${params.value || 0} 次`;
            },
            backgroundColor: 'rgba(6, 33, 68, 0.9)',
            borderColor: '#24bbec',
            textStyle: {
                color: '#fff'
            }
        },
        visualMap: {
            type: 'piecewise',
            min: 0,
            max: 20000,
            left: 'left',
            top: 'bottom',
            textStyle: {
                color: '#e6f7ff'
            },
            inRange: {
                color: ['#1a4d87', '#24bbec', '#ffc640', '#ff6b6b']
            },
            pieces: [
                {min: 10000, label: '≥10000', color: '#ff6b6b'},
                {min: 5000, max: 9999, label: '5000-9999', color: '#ffc640'},
                {min: 1000, max: 4999, label: '1000-4999', color: '#24bbec'},
                {min: 100, max: 999, label: '100-999', color: '#1a4d87'}
            ]
        },
        series: [{
            name: '咨询量',
            type: 'map',
            mapType: 'china',
            roam: true,
            label: {
                show: false,
                color: '#fff'
            },
            emphasis: {
                label: {
                    show: false
                },
                itemStyle: {
                    areaColor: '#ffa022'
                }
            },
            data: getMapData()
        }]
    };

    chart.setOption(option);

    // 响应窗口大小变化
    window.addEventListener('resize', function() {
        chart.resize();
    });
}

// 生成地图数据（模拟数据）
function getMapData() {
    return [
        {name: '北京', value: 18923},
        {name: '天津', value: 8234},
        {name: '上海', value: 20567},
        {name: '重庆', value: 6345},
        {name: '河北', value: 7841},
        {name: '河南', value: 6923},
        {name: '云南', value: 4210},
        {name: '辽宁', value: 5743},
        {name: '黑龙江', value: 3857},
        {name: '湖南', value: 6234},
        {name: '安徽', value: 4876},
        {name: '山东', value: 9543},
        {name: '新疆', value: 2345},
        {name: '江苏', value: 13245},
        {name: '浙江', value: 11456},
        {name: '江西', value: 4567},
        {name: '湖北', value: 5890},
        {name: '广西', value: 3876},
        {name: '甘肃', value: 3123},
        {name: '山西', value: 4567},
        {name: '内蒙古', value: 2876},
        {name: '陕西', value: 4678},
        {name: '吉林', value: 3654},
        {name: '福建', value: 7345},
        {name: '贵州', value: 3987},
        {name: '广东', value: 18972},
        {name: '青海', value: 1456},
        {name: '西藏', value: 876},
        {name: '四川', value: 7823},
        {name: '宁夏', value: 1789},
        {name: '海南', value: 2678},
        {name: '台湾', value: 5234},
        {name: '香港', value: 6342},
        {name: '澳门', value: 987}
    ];
}

// 数字滚动效果
function startDigitAnimation() {
    const digits = document.querySelectorAll('.total-digits span');

    // 初始状态设置
    digits.forEach(digit => {
        digit.style.opacity = 0;
        digit.style.transform = 'translateY(20px)';
    });

    // 逐个显示动画
    let delay = 0;
    digits.forEach(digit => {
        setTimeout(() => {
            digit.style.transition = 'opacity 1s ease, transform 1s ease';
            digit.style.opacity = 1;
            digit.style.transform = 'translateY(0)';
        }, delay);

        delay += 200; // 每个数字延迟200ms显示
    });

    // 循环脉冲效果
    setInterval(() => {
        digits.forEach((digit, index) => {
            setTimeout(() => {
                digit.style.transition = 'all 0.3s ease';
                digit.style.transform = 'scale(1.2)';
                digit.style.boxShadow = '0 0 20px #24bbec';

                setTimeout(() => {
                    digit.style.transform = 'scale(1)';
                    digit.style.boxShadow = '0 0 15px rgba(36, 187, 236, 0.5)';
                }, 300);
            }, index * 150);
        });
    }, 8000);
}
